<template>
    <div>
        <div style="margin: auto; left: 0; right: 0">
            <Navigation />
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"
                    ><div class="grid-content bg-purple"></div
                ></el-col>

                <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16"
                    ><div class="grid-content bg-purple-light">
                        <!-- 视频标题 -->
                        <div class="nav-n">
                            <div class="nav-left">
                                <div class="nav-left-span" style="width: 700px">
                                    {{ list1.title }}
                                </div>
                                <ul>
                                    <li>
                                        <i
                                            class="
                                                iconfont
                                                icon-shipinbofangyingpian2
                                            "
                                        />&nbsp;{{ list1.Clicks }} &nbsp;{{
                                            list1.u_id
                                        }}&nbsp;&nbsp;&nbsp;
                                    </li>
                                    <li>{{ list1.date }}</li>
                                </ul>
                            </div>
                            <div class="nav-right">
                                <!-- 头像 -->
                                <ul  >
                                    <li>
                                        <el-col :span="12">
                                            <div class="demo-basic--circle">
                                                <div
                                                    class="block"
                                                    shape="square"
                                                    @click="Routehome"
                                                >
                                                    <el-avatar
                                                    
                                                        shape="square"
                                                        :size="60"
                                                        :src="url"
                                                    >
                                                    </el-avatar>
                                                </div>
                                            </div>
                                        </el-col>
                                    </li>
                                    <li style="width: 300px" @click="Routehome"> 
                                        {{ list.nickname }}
                                    </li>
                                </ul>
                                <span>
                                    <el-button
                                        type="primary"
                                        class="button1"
                                        size="small"
                                        plain
                                        >关注</el-button
                                    >
                                </span>
                            </div>
                        </div>
                        <!-- 视频 -->

                        <div class="video-v">
                            <video
                                ref="myvideo"
                                width="998"
                                height="556"
                                controls
                                autoplay
                                style="background-color: black"
                                :src="url1 + list1.video"
                                type="video/mp4"
                            >
                                您的浏览器不支持 video 标签。
                            </video>
                            <!-- 视频下列 -->
                            <div class="nav-bottom">
                                <div
                                    style="
                                        text-align: left;
                                        height: 50px;
                                        line-height: 50px;
                                    "
                                >
                                    <span>13人正在看，297条评论</span>
                                    <span style="padding-left: 150px">
                                        <el-switch
                                            v-model="value"
                                            active-color="#13ce66"
                                            inactive-color="#e5e9f2"
                                        >
                                        </el-switch>
                                    </span>
                                </div>
                                <!-- 搜索框 -->
                                <div
                                    style="
                                        margin-top: -42px;
                                        padding-left: 500px;
                                    "
                                >
                                    <div style="width: 400px">
                                        <el-input
                                            class="inteer1"
                                            placeholder="离转正还差一点"
                                            v-model="input2"
                                        >
                                            <template slot="append"
                                                >发送</template
                                            >
                                        </el-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 点赞开始 -->
                        <div class="bottom-b" style="padding-top: 15px">
                            <span @click="like(id)">
                                <i
                                    class="iconfont icon-dianzan"
                                    v-if="isClick == 0"
                                />
                                <i
                                    v-if="isClick == 1"
                                    class="iconfont icon-dianzan"
                                    style="color: #fb7299"
                                />
                            </span>
                            <span class="clicknum" :v-model="clickNum">
                                {{ clickNum }}
                            </span>

                            <span style="margin-left: 80px" @click="likes">
                                <i
                                    class="iconfont icon-jinbi"
                                    v-if="isClick1 == 0"
                                />
                                <i
                                    class="iconfont icon-jinbi"
                                    v-if="isClick1 == 1"
                                    style="color: #00b5e5"
                                />
                            </span>
                            <span class="clicknum" :v-model="clickNum1">
                                {{ clickNum1 }}
                            </span>
                            <span style="margin-left: 80px"
                                ><i class="iconfont icon-xingxing" />79535</span
                            >

                            <span style="margin-left: 80px"
                                ><el-popover
                                    placement="bottom"
                                    title="标题"
                                    width="200"
                                    trigger="click"
                                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                                >
                                    <el-button
                                        slot="reference"
                                        style="
                                            border: 1px;
                                            color: black;
                                            background-color: white;
                                        "
                                        ><i
                                            class="iconfont icon-zhuanfa"
                                        />23</el-button
                                    >
                                </el-popover></span
                            >
                            <span style="margin-left: 380px"
                                ><a href="#">稿件投诉</a></span
                            >
                        </div>
                    </div></el-col
                >

                <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"
                    ><div class="grid-content bg-purple-light"></div
                ></el-col>
            </el-row>
        </div>
    </div>
</template>



<script>
//导航组件
import Navigation from "@/components/Navigation.vue";
export default {
    components: {
        Navigation: Navigation,
    },
    setup() {},
    data() {
        return {
            clickNum1: 2555,
            clickNum: 2555,
            isClick: "",
            isClick1: "",
            num: 1,
            //头像
            circleUrl:
                "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            sizeList: [],
            //switch按钮
            value: true,
            //
            input2: " ",

            formID: {},
            list3: [],
            list: [],
            list1: [],
            url: "",
            url1: process.env.VUE_APP_API_URL,
        };
    },
    created() {
        if (this.$route.query.allData) {
            this.formID = decodeURIComponent(this.$route.query.allData);
            //console.log("接收到的数据为"+this.formID)
            //console.log(this.$route);
            this.get();
        }
        // this.get();
        //this.query();
    },
    methods: {
        openTimer() {
            this.timer = setInterval(() => {
                this.$emit("videoStudyTime", this.studyTime);
            }, 5000);
        },
        query(num) {
            this.$api.__api_list_users_get_totoken(num).then((response) => {
                this.list = response[0];
                this.url = process.env.VUE_APP_API_URL + response[0].header;
                //this.url = "http://10.96.112.240:3000/" + this.list.video;
                // console.log(response[0]);
            });
        },
        get() {
            this.$api
                .__api_list_video_get_toid(this.formID)
                .then((response) => {
                    this.list1 = response[0];
                    // console.log(response[0].token)
                    this.query(response[0].token);
                });
        },
        like: function () {
            if (this.isClick == 0) {
                this.isClick = 1;
                this.clickNum = this.clickNum + 1;
                this.$api
                    .__api_list_video_put_toid({ Clicks: par })
                    .then((response) => {});
                console.log(this.clickNum);
            } else {
                this.isClick = 1;
                this.clickNum = this.clickNum + 1;
            }
        },

        likes: function (par) {
            if (this.isClick1 == 0) {
                this.isClick1 = 1;
                this.clickNum1 = this.clickNum1 + 1;
                this.$api
                    .__api_list_video_put_toid({ Clicks: par })
                    .then((response) => {});
                console.log(this.clickNum1);
            } else {
                this.isClick1 = 1;
                this.clickNum1 = this.clickNum1 + 1;
            }
        },
        Routehome() {
            
            this.$router.push({
                path: "/home",
                query: { allData: encodeURIComponent(this.list.token) },
            });
        },
    },
};
</script>

<style scoped>
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

ul,
ol {
    list-style: none;
}
a {
    text-decoration: none;
}

.nav {
    text-align: center;
}
.nav-n {
    width: 996px;
    height: 90px;
    margin: auto;
}

.nav-left {
    width: 700px;
    height: 80px;
}
.nav-left-span {
    padding-right: 450px;
    padding-top: 20px;
    font-size: 17px;
}
.nav-left ul {
    padding-left: 8px;
}
/* li字体 */
.nav-left ul li {
    float: left;
    font-size: 3.5mm;
    color: #999;
}

.nav-right {
    width: 296px;
    height: 80px;
    float: right;
    margin-top: -80px;
}

.nav-right ul {
    padding-left: 10px;
}
.nav-right ul li {
    padding-right: 120px;
}

.button1 {
    margin-right: 110px;
    margin-top: -10px;
}
.video-v {
    text-align: center;
}

.nav-bottom {
    height: 50px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}


.el-input__inner {
    background-color: #f5f7fa;
    width: 420px;
}

.bottom-b {
    height: 50px;
}

.el-popover__reference {
    background-color: white;
}
</style>

